<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

	<link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
	<link rel="stylesheet" href="../../css/AttractionCss/animate.css" type="text/css">
	<link rel="stylesheet" href="../../css/AttractionCss/font-awesome.css" type="text/css">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="../../plugins/jquery/jquery.min.js"></script>
	<!--引入bootstrap的js文件-->
	<script src="../../plugins/bootstrap/js/bootstrap.js"></script>


	<script>
		//图片上传预览    IE是用了滤镜。
		function previewImage(file) {
			var MAXWIDTH = 90;
			var MAXHEIGHT = 90;
			var div = document.getElementById('preview');
			if (file.files && file.files[0]) {
				div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
				var img = document.getElementById('imghead');
				img.onload = function () {
					var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
					img.width = rect.width;
					img.height = rect.height;
					//                 img.style.marginLeft = rect.left+'px';
					img.style.marginTop = rect.top + 'px';
				}
				var reader = new FileReader();
				reader.onload = function (evt) { img.src = evt.target.result; }
				reader.readAsDataURL(file.files[0]);
			}
			else //兼容IE
			{
				var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
				file.select();
				var src = document.selection.createRange().text;
				div.innerHTML = '<img id=imghead>';
				var img = document.getElementById('imghead');
				img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
				var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
				div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
			}
		}
		function clacImgZoomParam(maxWidth, maxHeight, width, height) {
			var param = { top: 0, left: 0, width: width, height: height };
			if (width > maxWidth || height > maxHeight) {
				rateWidth = width / maxWidth;
				rateHeight = height / maxHeight;

				if (rateWidth > rateHeight) {
					param.width = maxWidth;
					param.height = Math.round(height / rateWidth);
				} else {
					param.width = Math.round(width / rateHeight);
					param.height = maxHeight;
				}
			}
			param.left = Math.round((maxWidth - param.width) / 2);
			param.top = Math.round((maxHeight - param.height) / 2);
			return param;
		}
	</script>
</head>

<body>
	<div class="container-fluid" id="head" style="margin-bottom: 0px;">
		<div class="row">

			<nav class="navbar" role="navigation"
				style="background-color: rgb(206, 228, 247);padding-left: 70px;margin-bottom: 2px">
				<div class="container-fluid">
					<div>
						<button type="button" class="navbar-toggle" data-toggle="collapse"
							data-target="#example-navbar-collapse" style="background-color: royalblue">
							<span class="sr-only">切换导航</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a href="index.html"> <img src="imgs/index/logo.jpg" alt="失败" id="logo"
								class="img-circle navbar-brand"></a>
						<a class="navbar-brand" href="index.html" style="padding-left: 0px;font-family:楷体">
							<span data-toggle="tooltip" title="悠 U 新方式">
								悠&nbsp;U</span></a>
					</div>

					<div class="collapse navbar-collapse" id="example-navbar-collapse ">
						<ul class="nav navbar-nav ">
							<li><a href="index.html">
									<span style="padding:0px 20px" data-toggle="tooltip" title="首页"> 首页</span></a></li>

							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									游记<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li><a href="#">
											<span class="glyphicon glyphicon-user"
												style="text-shadow: rgb(216, 206, 206) 3px -1px;"></span>
											&nbsp;达人
											<span class="badge pull-center" style="background-color: red">hot</span>
										</a></li><br>
									<li><a href="#">
											<span class="glyphicon glyphicon-edit"></span>
											写游记
											<span class="badge pull-center"
												style="background-color: red;font-size:3px">赚钻石</span>
										</a></li><br>
									<li><a href="#">
											<span class="glyphicon glyphicon-flag"></span>
											游记主页</a></li><br>
								</ul>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									景点<b class="caret"></b>
									<!-- <span class="label label-danger" style="font-size: 1px;">NEW</span>-->
								</a>
								<ul class="dropdown-menu">
									<li><a href="#"><span class="glyphicon glyphicon-fire">&nbsp;主题景点</span>
											<span class="badge pull-center"
												style="background-color: red;font-size:3px">NEW</span>
										</a></li><br>
									<li><a href="#"><span class="glyphicon glyphicon-plane">&nbsp;精品行程</span></a></li>
									<br>
									<li><a href="#"><span class="glyphicon glyphicon-bell">&nbsp;当地玩乐</span></a></li>
								</ul>
							</li>
							<li>
								<a href="#">
									<span data-toggle="tooltip" title="导&nbsp;游">导游</span>
									<span class="badge pull-center"
										style="background-color: red;font-size:1px">hot</span>
								</a>
							</li>

						</ul>

						<!-- <div style="padding-top:15px" class="">
									<input type="text" placeholder="用户/游戏/动态" style=" height:20px">
									
								</div> -->


						<ul class="nav navbar-nav navbar-right" style="padding-right: 100px">

							<li class="dropdown">
							<li> <a></a></li>
							<li><a href="#" class="dropdown-toggle" data-toggle="dropdown"
									style="font-family: 楷体;padding-left: 0px">
									我的悠 U &nbsp;<img id="headerImg" src="imgs/index/head.jpg" class="img-circle"><b
										class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">我的订单</a>
									</li>
									<li>
										<a href="#">我的导游</a>
									</li>
									<li>
										<a href="#">我的钱包</a>
									</li>

									<li>
										<a href="#">我的游记</a>
									</li>
									<li class="divider"></li>
									<li> <a href="#">互动信息</a> </li>
									<li> <a href="#">我的账号</a> </li>
									<li> <a href="#">退出</a> </li>

								</ul>
							</li>
							<li><a href="#weibo"><i class="fa fa-weibo"></i></a></li>
							<li><a href="#weixin"><i class="fa fa-weixin"></i> </a></li>
							<li><a href="#weixin"><i class="fa fa-qq"></i></a></li>
							<li><a href="">登录</li> </a>
							<li><a href="">注册</li> </a>



						</ul>
					</div>
				</div>
			</nav>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row">
			<div class="container"
				style="background-color: #F7F9F7;padding-top: 50px;padding-bottom: 50px;margin-top: 50px;margin-bottom:50px;width: 800px">
				<div class="col-md-6 col-md-offset-3">
					

						<div class="form-group has-feedback" style="margin-bottom: 20px">
							<label for="username">真实姓名</label>
							<div class="input-group">
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
								<input type="text" id="username" class="form-control" placeholder="请输入真实姓名"
									maxlength="20" type="text">
							</div>

							<span style="color:red;display: none;" class="tips"></span>
							<span style="display: none;"
								class=" glyphicon glyphicon-remove form-control-feedback"></span>
							<span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
						</div>








						<div class="row" style="margin-bottom: 20px">
							<div class="col-xs-7">
								<div class="form-group has-feedback">
									<label for="idcode-btn">现居地址</label>
									<div class="input-group">
										<span class="input-group-addon"><span
												class="glyphicon glyphicon-home"></span></span>
										<input id="idcode-btn" class="form-control" placeholder="请输入现居地址" maxlength="4"
											type="text">
									</div>
									<span style="color:red;display: none;" class="tips"></span>
									<span style="display: none;"
										class="glyphicon glyphicon-remove form-control-feedback"></span>
									<span style="display: none;"
										class="glyphicon glyphicon-ok form-control-feedback"></span>
								</div>
							</div>
							<div class="col-xs-5" style="padding-top: 30px">
								<div id="idcode" style="background: transparent;"></div>
							</div>
						</div>

						<div class="form-group has-feedback" style="margin-bottom: 20px">
							<label for="phoneNum">手机号码</label>
							<div class="input-group">
								<span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span>
								<input id="phoneNum" class="form-control" placeholder="请输入手机号码" maxlength="11"
									type="text">
							</div>
							<span style="color:red;display: none;" class="tips"></span>
							<span style="display: none;"
								class="glyphicon glyphicon-remove form-control-feedback"></span>
							<span style="display: none;" class="glyphicon glyphicon-ok form-control-feedback"></span>
						</div>

						<div class="row" style="margin-bottom: 20px">
							<div class="col-xs-7">
								<div class="form-group has-feedback">
									<label for="idcode-btn">校验码</label>
									<div class="input-group">
										<span class="input-group-addon"><span
												class="glyphicon glyphicon-qrcode"></span></span>
										<input id="idcode-btn" class="form-control" placeholder="请输入校验码" maxlength="6"
											type="text">
									</div>
									<span style="color:red;display: none;" class="tips"></span>
									<span style="display: none;"
										class="glyphicon glyphicon-remove form-control-feedback"></span>
									<span style="display: none;"
										class="glyphicon glyphicon-ok form-control-feedback"></span>
								</div>
							</div>
							<div class="col-xs-5 text-center" style="padding-top: 26px">
								<button type="button" id="loadingButton" class="btn btn-primary"
									autocomplete="off">获取短信校验码</button>
							</div>
						</div>


						<div class="form-group has-feedback" style="margin-bottom:20px">
							<label for="phoneNum">选择人群分类</label>
							<div class="input-group">
								<span class="input-group-addon"><span class="glyphicon glyphicon-tags"></span></span>
								<select id="yincang" class="form-control selectpicker" data-mobile="true">
									<option value="1">/</option>
									<option value="1">社会人士</option>
									<option value="2">学生</option>
								</select>
							</div>
						</div>



						<div id="addCommodityIndex" style="margin: 20px">
							<!--input-group start-->
							<div class="input-group row">
								<div class="col-sm-3">
									<label>上传证件照</label>
								</div>
								<div class="col-sm-9 big-photo">
									<div id="preview">
										<img id="imghead" src="../../imgs/applyTourist/photo_icon.png" width="90"
											height="90" onclick="$('#previewImg').click();">
									</div>
									<input type="file" onchange="previewImage(this)" style="display: none;"
										id="previewImg">
									<!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">-->
								</div>
							</div>
							<!--input-group end-->
							<div>
								<span>*注意 若选择社会人士,请上传身份证正面照;若选择学生,请上传学生证件照</span>
							</div>
						</div>

						<!-- 隐藏 -->
						<div id="yincang_div" style="display: none;margin-bottom: 20px">
							<div class="form-group has-feedback">
								<label for="phoneNum">学历</label>
								<div class="input-group">
									<span class="input-group-addon"><span
											class="glyphicon glyphicon-phone"></span></span>
									<input id="phoneNum" class="form-control" placeholder="请输入学历" maxlength="11"
										type="text">
								</div>
								<span style="color:red;display: none;" class="tips"></span>
								<span style="display: none;"
									class="glyphicon glyphicon-remove form-control-feedback"></span>
								<span style="display: none;"
									class="glyphicon glyphicon-ok form-control-feedback"></span>
							</div>

							<div class="form-group has-feedback" style="margin-bottom: 20px">
								<label for="phoneNum">学校</label>
								<div class="input-group">
									<span class="input-group-addon"><span
											class="glyphicon glyphicon-phone"></span></span>
									<input id="phoneNum" class="form-control" placeholder="请输入学校" maxlength="11"
										type="text">
								</div>
								<span style="color:red;display: none;" class="tips"></span>
								<span style="display: none;"
									class="glyphicon glyphicon-remove form-control-feedback"></span>
								<span style="display: none;"
									class="glyphicon glyphicon-ok form-control-feedback"></span>
							</div>

							<div class="form-group has-feedback" style="margin-bottom: 20px">
								<label for="phoneNum">入学时间</label>
								<div class="input-group">
									<span class="input-group-addon"><span
											class="glyphicon glyphicon-phone"></span></span>
									<input id="phoneNum" class="form-control" placeholder="请输入入学时间" maxlength="11"
										type="text">
								</div>
								<span style="color:red;display: none;" class="tips"></span>
								<span style="display: none;"
									class="glyphicon glyphicon-remove form-control-feedback"></span>
								<span style="display: none;"
									class="glyphicon glyphicon-ok form-control-feedback"></span>
							</div>




						</div>



						<div class="form-group" style="margin-bottom: 20px">
							<input class="form-control btn btn-primary" id="submit"
								value="立&nbsp;&nbsp;即&nbsp;&nbsp;申&nbsp;&nbsp;请" type="submit" data-toggle="modal" data-target="#myModal">
						</div>

						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="myModalLabel">申请导游</h4>
									</div>
									<div class="modal-body">恭喜你!申请成功,请等待审核</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										
									</div>
								</div><!-- /.modal-content -->
							</div><!-- /.modal -->
						</div>

						<div class="form-group" style="margin-bottom: 20px">
							<input value="重置" id="reset" class="form-control btn btn-danger" type="reset">
						</div>
					
				</div>
			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row">
			<nav class="navbar navbar-inverse fixed-bottom" role="navigation">
				<div class="container-fluid" style="font-size: 13px">
					<div class="row">
						<ul class="nav navbar-nav">
							<li>
								<div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 150px">
									<h4>悠&nbsp;U旅行</h4>
									<p>悠&nbsp;U是一个新方式的<span style="color: bisque"> "旅行交友"</span> 的网站,<br>
										旨在帮助旅行者计划和结伴游玩,<br>
										可以提供业余的引路人带给旅行者更好的 <span style="color: bisque"> "游玩体验"</span><br>
										提供一定的旅行日记,打造 <span style="color: bisque">"新方式旅行交友"</span><br>
									</p>
								</div>
							</li>
							<li>
								<div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 180px">
									<h4 style="text-align: center">关于我们</h4>
									<ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
										<li>关于悠 U</li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系我们</li><br>
										<li>服务协议</li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游记协议</li><br>
										<li>达人协议</li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私政策</li><br>
										<li>网络信息侵权通知指引</li><br>
										<li>网站地图</li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商业合作</li><br>
										<li style="color: bisque">&nbsp;&nbsp;&nbsp;加入我们</li>

									</ul>
							</li>
							<li>
								<div style="color: rgb(177, 177, 177);margin-top: 50px;margin-left: 180px">
									<h4 style="text-align: center">帮助中心</h4>
									<ul class="nav navbar-nav" style="list-style: none;margin-left: 0px">
										<li>新手上路</li><br>
										<li style="color: bisque">意见反馈</li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;常见问题</li><br>
										<li style="color: bisque">帮助中心</li>
										<li>&nbsp;&nbsp;&nbsp;&nbsp;旅行工具</li><br>
								</div>
							</li>
						</ul>
					</div>
					<br><br>
					<hr>
					<div style="color: rgb(177, 177, 177);margin-top: 20px;margin-left: 150px;font-size: 12px">
						<div style="float: left;"><img src="imgs/index/logo.jpg" width="60px" height="40px"
								style="opacity: 0.7;border-radius: 80px;">
						</div>
						<div style="float: left;margin: 10px 5px;font-family: '楷体';font-size:18px">悠 U</div>
						<div style="float: left;;margin-top: 10px;margin-left: 30px">© 2019 悠U
							版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经营许可&nbsp;&nbsp;&nbsp;营业执照</div>
						<div style="clear: both;margin-left: 130px;margin-bottom: 100px">
							悠U不是旅行社,也不是代理商,我们只提供一些免费、客观、公正
							、计费的攻略指南,以及一些业余的引路人
							对外部网站概不负责</div>

					</div>
				</div>
				<div
					style="float: right;width: 40px;height: 50px;margin-right: 10px;background-color: aliceblue;text-align: center">
					<a href="#top" style="color: rgb(177, 177, 177)"><br>Top&nbsp;↑</a>
				</div>
			</nav>

		</div>
	</div>



	<script>
		window.onload = function () {
			var obj_select = document.getElementById("yincang");
			var obj_div = document.getElementById("yincang_div");

			obj_select.onchange = function () {

				obj_div.style.display = this.value == 1 ? "none" : "block";

			}

		}

	</script>


</body>

</html>